<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>充值</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
	</head>

	<body>

		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%;
			}
			
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-bar .mui-title {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active,
			.mui-btn-link {
				color: #FFFFFF!important;
				margin-top: 17px;
			}
			
			.mui-icon {
				color: #FFFFFF;
			}
			
			.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after {
				color: #FFFFFF;
				background-color: #f16456;
				border-radius: 20px;
				height: 20px;
				font-size: 20px;
				right: 25px;
			}
			
			.mui-input-row span {
				position: absolute;
				left: 16px;
				top: 20px;
				font-size: 18px;
			}
			
			.mui-btn {
				border: 1px solid #f16456;
				width: 300px;
				background-color: #f16456;
			}
			
			.mui-btn:active {
				border: 1px solid #de7c79!important;
				background-color: #de7c79!important;
			}
			
			.mui-input-row {
				background: white;
				margin-top: 5px;
				margin-left: 5px;
				margin-right: 5px;
				height: 60px;
			}
			
			.mui-navigate-right {
				padding-top: 18px!important;
				padding-bottom: 5px!important;
			}
			
			.iconfont {
				font-size: 40px;
			}
			
			.mui-navigate-right p {
				top: 20px;
				position: absolute;
				left: 60px;
			}
			
			input[type=button] {
				color: #FFFFFF;
				background-color: #f16456;
				height: 100%;
			}
		</style>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn-link mui-pull-right" onclick="vm.myHistory()"><span class="mui-icon mui-icon-bars"></span></a>
			<h1 class="mui-title">充值</h1>
		</header>
		<div class="mui-content" id="bizVue" v-cloak>
			<h4 class="mui-content-padded mui-text-center" v-if="config.enableAlipay == 0 && config.enableWechat == 0 && config.enableUnionpay == 0">
				<br/><br/><br/><br/><br/><br/>非常抱歉，当前第三支付通道正在紧急维护，请联系客服进行充值。
			</h4>
			<div v-if="config.enableAlipay == 1 || config.enableWechat == 1 || config.enableUnionpay == 1">
				<h6 class="mui-content-padded">最低充值金额为{{config.lowestDepositAmount}}元</h6>
				<div class="mui-input-row">
					<span>金额￥</span>
					<input type="number" placeholder="请输入充值金额" style="height: 100%;padding-left: 100px;" v-model="amount">
				</div>
				<div class="mui-input-row" style="background-color: initial;">
					<input type="button" value="20元" @click="topup(20)" />
					<input type="button" value="50元" @click="topup(50)" />
					<input type="button" value="100元" @click="topup(100)" />
					<input type="button" value="200元" @click="topup(200)" />
					<input type="button" value="500元" @click="topup(500)" />
				</div>
				<p class="mui-content-padded">支付方式</p>
				<ul class="mui-table-view mui-table-view-radio">
					<li class="mui-table-view-cell" v-if="config.enableAlipay == 1" paymentType="0">
						<a class="mui-navigate-right">
							<span class="iconfont icon-zhifubao" style="color: #00a0e9;"></span>
							<p>支付宝</p>
						</a>
					</li>
					<li class="mui-table-view-cell" v-if="config.enableWechat == 1" paymentType="1">
						<a class="mui-navigate-right">
							<span class="iconfont icon-wechat" style="color: #3eb74f;"></span>
							<p>微信支付</p>
						</a>
					</li>
					<li class="mui-table-view-cell" v-if="config.enableUnionpay == 1" paymentType="2">
						<a class="mui-navigate-right">
							<img src="../images/unionpay.png" width="35px" style="margin-left: 5px;">
							<p>银行卡</p>
						</a>
					</li>
				</ul>
				<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
					<button type="button" class="mui-btn mui-btn-primary" @click="topup(amount)">充值</button>&nbsp;&nbsp;
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script>
			mui.init();
			var vm = new Vue({
				el: '#bizVue',
				data: {
					member: {},
					config: {},
					amount: ""
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						vm.member = JSON.parse(plus.storage.getItem("member"));
						//加载最新配置
						mui.postJSON(ConfigInit, {}, function(result) {
							if(result.code == 0) {
								vm.config = result;
								plus.storage.setItem("config", JSON.stringify(result));
							}
						});

						setTimeout(function() {
							$(".mui-table-view-cell:first").addClass("mui-selected");
						}, 200);

					});
				},
				methods: {
					topup: function(num) {
						if(num == "") {
							mymui("请输入充值金额");
							return;
						}
						vm.amount = Math.abs(Math.floor(parseFloat(num) * 100) / 100);
						if(vm.amount < vm.config.lowestDepositAmount) {
							mymui("最低充值金额为" + vm.config.lowestDepositAmount + "元");
							return;
						}
						if(vm.amount > vm.config.highestDepositAmount) {
							mymui("最高充值金额为" + vm.config.highestDepositAmount + "元");
							return;
						}
						var paymentType = $(".mui-selected").attr("paymentType");
						mConsole.log(paymentType);
					},
					myHistory: function() {
						mui.openWindow({
							id: 'deposit_list',
							url: 'deposit_list.html',
							waiting: {
								autoShow: false
							}
						});
					}
				}
			});
		</script>
	</body>

</html>